<template>
	<view class="page-footer df">
		<view v-for="item in tab" :key="item.id" class="footer-item df-cc" :class="{round:item.id==1,active:cur==item.id}" @click="footerClick(item)">
			<view class="img-box">
				<image :src="cur==item.id?item.activeIcon:item.icon" mode="" class="footer-icon"></image>
			</view>
			<view class="text">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			page:{
				type:Number,
				default:1
			}
		},
		data() {
			return {
				tab: [
					{id:2,name:'lan发现',icon:require('../static/tabbar/faxian.png'),activeIcon:require('../static/tabbar/faxian-a.png'),url:'/pages/faxian/index'},
					{id:3,name:'lan活动',icon:require('../static/tabbar/huodong.png'),activeIcon:require('../static/tabbar/huodong-a.png'),url:'/pages/huodong/list'},
					{id:1,name:'lan医美',icon:require('../static/tabbar/goods.png'),activeIcon:require('../static/tabbar/goods-a.png'),url:'/pages/goods/index'},
					{id:4,name:'lan积分',icon:require('../static/tabbar/king.png'),activeIcon:require('../static/tabbar/king-a.png'),url:'/pages/tabbar/integral'},
					{id:5,name:'我的',icon:require('../static/tabbar/my.png'),activeIcon:require('../static/tabbar/my-a.png'),url:'/pages/tabbar/my'},
				],
				cur:1
			};
		},
		created() {
			let routes = getCurrentPages()
			let route = routes[routes.length-1]
			route = '/'+ route.route
			let item = this.tab.find(item=>item.url==route)
			console.log("item");
			console.log(item);
			if(item) {
				this.cur = item.id
				console.log("cur_id");
				console.log(this.cur);
			}
		},
		onShow() {
			console.log('show')
		},
		methods:{
			footerClick(data) {
				this.cur = data.id
				//this.goRouter(data.url)
				uni.redirectTo({
					url:data.url
				})
				/*
				uni.switchTab({
					url:data.url
				})
				*/
			}
		}
	}
</script>

<style lang="scss">
.page-footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 999;
	// box-shadow: 0px -1px 0px #eaeaea;
	.footer-item {
		flex:1;
		flex-direction: column;
		color: #666;
		font-size: 22rpx;
		.text {
			margin-top: 10rpx;
		}
		&.round {
			.img-box {
				position: relative;
				padding: 20rpx;
				padding-bottom: 0;
				border-radius: 50%;
				top: -30rpx;
				background-color: #fff;
				box-shadow: 0px -1px 0px #eaeaea;
				.footer-icon {
					width: 60rpx;
					height: 60rpx;
					
				}
			}
			.text {
				position: relative;
				top: -20rpx;
			}
		}
		&.active {
			.text {
				color: #e64340;
			}
		}
		.footer-icon {
			width: 40rpx;
			height: 40rpx;
		}
		
	}
}
</style>
